<template>
  <div class="container" ref="mainCon">
    <!-- <el-row class="titleBox clearfix">
      <span class="blockTitle">授权码管理</span>
      <el-button
        type="primary"
        round
        class="listAddBtn fr"
        @click="addEquipment"
        >添加</el-button
      >
    </el-row> -->
    <topTitle titleText="授权码管理"></topTitle>
    <el-button type="primary" round class="listAddBtn fr" @click="addEquipment"
      >添加</el-button
    >
    <div class="mainCon">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                placeholder="输入项目名称"
                clearable
                v-model="filterField.projectName"
                @blur="filterField.projectName = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="设备类型" class="row-padding-bottom">
              <el-select
                v-model="filterField.type"
                placeholder="请选择"
                clearable
              >
                <el-option label="第三方秘钥" value="thrid" />
                <el-option label="硬件合作商" value="yjhz" />
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="授权码" class="row-padding-bottom">
                <el-input
                  placeholder="输入授权码"
                  clearable
                  v-model="filterField.key"
                  @blur="filterField.key = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="授权码状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="(item, index) of typeStatus"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="添加时间" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="操作人姓名" class="row-padding-bottom">
                <el-input
                  placeholder="请输入操作人姓名"
                  clearable
                  v-model="filterField.operator"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="发放对象" class="row-padding-bottom">
                <el-input
                  placeholder="请输入发放对象"
                  clearable
                  v-model="filterField.targetName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="备注" class="row-padding-bottom">
                <el-input
                  placeholder="输入备注"
                  clearable
                  v-model="filterField.remark"
                ></el-input>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchTable"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont icondaochu"
                @click="exportExcel"
                ><span class="opetareText">导出报表</span></el-button
              >
            </el-form-item>
          </el-col>
          <!-- <el-form-item>
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icondaochu"
              @click="exportExcel"
              ><span class="opetareText">导出报表</span></el-button
            >
          </el-form-item> -->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <!-- 列表 -->
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <!-- <el-table-column
          align="center"
          prop="projectId"
          label="项目id"
          :formatter="formatTd"
        ></el-table-column> -->
          <el-table-column label="项目id" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectId"
                :columnName="'projectId'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- <el-table-column
          align="center"
          prop="projectName"
          label="项目名称"
          :formatter="formatTd"
        ></el-table-column> -->
          <el-table-column label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="typeValue"
            label="设备类型"
            width="140"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == 'thrid'">第三方秘钥</span>
              <span v-else-if="scope.row.type == 'yjhz'">硬件合作商</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="authCode"
            label="授权码"
            :formatter="formatTd"
            width="220"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.key }}</span>
              <i
                class="icon iconfont iconcopy"
                @click="copy(scope.row.key)"
                style="cursor: pointer"
              ></i>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="授权码状态"
            :formatter="formatTd"
            width="150"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="machineNo"
            label="设备识别码"
            :formatter="formatTd"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="添加时间"
            :formatter="timeForma"
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="updateTime"
            label="激活时间"
            :formatter="upTimeForma"
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="nickName"
            label="操作用户"
            :formatter="formatTd"
            width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="operator"
            label="操作人姓名"
            :formatter="formatTd"
            width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="targetName"
            label="发放对象"
            :formatter="formatTd"
            width="100"
          ></el-table-column>
          <el-table-column prop="remark" label="备注" :formatter="formatTd">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="操作"
            width="100px"
            fixed="right"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.projectName">
                <el-link type="primary" @click="binding(scope.row)"
                  >绑定设备</el-link
                ></span
              >
              <el-link type="primary" @click="updateOperator(scope.row)"
                >修改</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>
    <!--添加,修改-->
    <el-dialog
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="handleCloseForm"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
    >
      <div slot="title" class="dialogTitle">
        <p>
          绑定考勤设备
          <span
            >仅用于授权码绑定硬件合作商设备，其他设备请在设备监控管理页面操作</span
          >
        </p>
      </div>
      <el-form
        :model="formData"
        label-width="80px"
        :rules="formRules"
        ref="formData"
        class="form"
      >
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item
              label="项目名称"
              prop="projectId"
              class="row-padding-bottom"
            >
              <el-select
                v-model="formData.projectId"
                clearable
                filterable
                placeholder="请选择"
                :filter-method="selectChange"
                class="selectWidth"
                @visible-change="handleChange"
                remote="true"
                :remote-method="remoteMethod"
              >
                <el-option
                  v-for="(item, index) in projectList"
                  :key="index"
                  :label="item.projectName"
                  :value="index"
                ></el-option>
                <div class="block">
                  <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    :current-page.sync="pageNo"
                    :page-size="pageSizeNumber"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  ></el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item
              label="安装单位"
              prop="uscc"
              class="row-padding-bottom"
            >
              <el-input v-model="formData.companyName" :disabled="true">
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="安装单位" v-else>{{formData.companyName || "--"}}</el-form-item> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="col-position">
            <el-form-item
              label="设备类型"
              class="row-padding-bottom"
              prop="type"
            >
              <el-select
                v-model="formData.type"
                placeholder="请选择"
                clearable
                class="selectWidth"
                @change="typeSelectChange"
              >
                <el-option
                  v-for="(item, index) of typeData"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item
              label="识别号码"
              class="row-padding-bottom"
              prop="machineNo"
            >
              <el-input
                placeholder="输入识别号码"
                clearable
                v-model="formData.machineNo"
                @blur="formData.machineNo = changeValue($event)"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-position">
            <el-form-item
              label="打卡点"
              class="row-padding-bottom"
              prop="pointId"
            >
              <el-select
                v-model="formData.pointId"
                placeholder="请选择"
                clearable
                class="selectWidth"
              >
                <el-option
                  v-for="(item, index) of points"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-position">
            <el-form-item label="授权码" class="row-padding-bottom">
              <el-input
                placeholder="输入授权码"
                clearable
                :disabled="true"
                v-model="formData.authCode"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="col-position">
            <el-form-item
              label="进出方向"
              class="row-padding-bottom"
              prop="direction"
            >
              <el-select
                v-model="formData.direction"
                placeholder="请选择"
                clearable
                class="selectWidth"
              >
                <el-option label="无方向" value="-1"></el-option>
                <el-option label="出门" value="0"></el-option>
                <el-option label="进门" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="formData.remark"
                maxlength="100"
                row="3"
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleCloseForm" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="toSave"
          class="save"
          :loading="isRuleLoading"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 添加授权码 -->
    <el-dialog
      title="添加授权码"
      :visible.sync="addFormVisible"
      :close-on-click-modal="false"
      @close="handleCloseAddForm"
      custom-class="dialog-minwidth"
      :append-to-body="true"
      :modal-append-to-body="false"
    >
      <el-form
        :model="addFormData"
        label-width="100px"
        ref="addFormData"
        class="form"
        :rules="addFormRules"
      >
        <el-row>
          <el-col :span="24" class="col-position">
            <el-form-item
              label="设备类型"
              class="row-padding-bottom"
              prop="type"
            >
              <el-select
                v-model="addFormData.type"
                placeholder="请选择"
                clearable
                class="selectWidth"
                @change="machineTypeChange"
              >
                <el-option label="第三方秘钥" value="thrid" />
                <el-option label="硬件合作商" value="yjhz" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom" v-show="machineType === 'thrid'">
          <el-col :span="24" class="col-position">
            <el-form-item
              label="项目名称"
              class="row-padding-bottom"
              prop="projectId"
            >
              <el-select
                v-model="addFormData.projectId"
                clearable
                filterable
                placeholder="请选择"
                :filter-method="selectChange"
                class="selectWidth"
                @visible-change="handleChange"
                remote="true"
                :remote-method="remoteMethod"
              >
                <el-option
                  v-for="(item, index) in projectList"
                  :key="index"
                  :label="item.projectName"
                  :value="index"
                />
                <div class="block">
                  <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    :current-page.sync="pageNo"
                    :page-size="pageSizeNumber"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  ></el-pagination>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom" v-show="machineType === 'yjhz'">
          <el-col :span="24" class="col-position">
            <el-form-item label="生成KEY数量" prop="keyNum">
              <el-input
                v-model="addFormData.keyNum"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="12" class="col-position">
            <el-form-item label="操作人姓名" prop="operator">
              <el-input
                placeholder="请输入操作人姓名"
                v-model="addFormData.operator"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item label="发放对象" prop="targetName">
              <el-input
                placeholder="请输入发放对象"
                v-model="addFormData.targetName"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="addFormData.remark"
                maxlength="100"
                row="3"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleClose" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="toSaveAuthCode"
          class="save"
          :loading="isRuleLoading"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!---修改操作对象-->
    <el-dialog
      title="修改"
      :visible.sync="operatorFormVisible"
      :close-on-click-modal="false"
      @close="operatorHandleClose"
      custom-class="dialog-minwidth"
      :append-to-body="true"
      :modal-append-to-body="false"
    >
      <el-form
        :model="operatorFormData"
        label-width="100px"
        ref="operatorFormData"
        class="form"
        :rules="operatorFormRules"
      >
        <el-row class="row-padding-bottom">
          <el-col :span="12" class="col-position">
            <el-form-item label="操作人姓名" prop="operator">
              <el-input
                placeholder="请输入操作人姓名"
                v-model="operatorFormData.operator"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item label="发放对象" prop="targetName">
              <el-input
                placeholder="请输入发放对象"
                v-model="operatorFormData.targetName"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                v-model="operatorFormData.remark"
                maxlength="100"
                row="3"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="operatorHandleClose" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveOperator"
          class="save"
          :loading="isOperatorLoading"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '@/kits/common'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'authorizeCodeList',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '授权码管理',
      advanced: false,
      requestUrl: 'api-att/cs/attkey/expand/projectKeyList', //表格请求路径。
      loading: false,
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        projectName: '',
        type: '',
        machineNo: '',
        startTime: '',
        endTime: '',
        key: '',
        status: '',
        operator: '',
        targetName: '',
        remark: '',
      },
      pageSize: 20,
      pageNo: 1,
      projectList: [], //项目名称下来列表
      pageSizeNumber: 20,
      total: 0,
      projectId: '',
      addOrEdit: '',
      formVisible: false,
      formData: {
        projectId: '',
        remark: '',
        type: '',
        machineNo: '',
        authCode: '',
        uscc: '',
        direction: '',
        projectName: '',
        companyName: '',
        pointId: '',
      },
      formRules: {
        projectId: [
          { required: true, message: '项目名称不能为空', trigger: 'change' },
        ],
        uscc: [
          { required: true, message: '安装单位不能为空', trigger: 'change' },
        ],
        type: [
          { required: true, message: '设备类型不能为空', trigger: 'change' },
        ],
        machineNo: [
          { required: true, message: '请输入正确的识别号', trigger: 'blur' },
        ],
        direction: [
          { required: true, message: '进出方向不能为空', trigger: 'change' },
        ],
        pointId: [
          { required: true, message: '打卡点不能为空', trigger: 'change' },
        ],
      },
      installUnitList: [],
      isDisabled: false,
      usccDisabled: false,
      isRuleLoading: false,
      id: '',
      typeData: '',
      companyNameUscc: '', //修改赋值的uscc
      projectNameId: '', //修改赋值的projectId
      pointShow: false,
      authCodeShow: false,
      points: [], //工点列表
      isShowUpdate: '',
      isShowDelete: '',
      isShowAdd: '',
      isShowDetail: '',
      // 添加授权码
      addFormData: {
        projectId: '',
        keyNum: '',
        type: '',
        operator: '',
        targetName: '',
        remark: '',
      },
      addFormVisible: false,
      machineType: '',
      time: [],
      typeStatus: [
        { name: '待激活', code: '0' },
        { name: '已激活', code: '1' },
      ],
      addFormRules: {
        keyNum: [
          {
            required: true,
            message: '请输入1到1000的整数',
            pattern: /^(\+?[1-9]\d{0,2}|\+?1000)$/,
            trigger: 'blur',
          },
        ],
        type: [
          {
            required: true,
            message: '请选择设备类型',
            trigger: 'change',
          },
        ],
        projectId: [
          {
            required: true,
            message: '请选择项目名称',
            trigger: 'change',
          },
        ],
        operator: [
          {
            required: true,
            message: '请输入操作人姓名',
            trigger: 'blur',
          },
          { max: 20, message: '最多可输入20字', trigger: 'blur' },
        ],
        targetName: [
          {
            required: true,
            message: '请输入发放对象',
            trigger: 'blur',
          },
          { max: 20, message: '最多可输入20字', trigger: 'blur' },
        ],
      },
      searchVal: '',
      operatorFormData: {
        id: '',
        operator: '',
        targetName: '',
        remark: '',
      },
      operatorFormVisible: false,
      isOperatorLoading: false,
      operatorFormRules: {
        operator: [
          {
            required: true,
            message: '请输入操作人姓名',
            trigger: 'blur',
          },
          { max: 20, message: '最多可输入20字', trigger: 'blur' },
        ],
        targetName: [
          {
            required: true,
            message: '请输入发放对象',
            trigger: 'blur',
          },
          { max: 20, message: '最多可输入20字', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.getType()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {},
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    // 获取设备类型
    getType() {
      this.axios({
        method: 'post',
        data: { type: 'HARDWARE_TYPE' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.typeData = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //加载项目列表
    getProjectList(pageNo, pageSizeNumber, val) {
      this.axios({
        method: 'post',
        url: 'api-p/projectstats/expand/list',
        data: {
          pageNo: pageNo,
          pageSize: pageSizeNumber,
          projectName: val,
          isSa: '',
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectList = response.data.result.results
              this.total = response.data.result.total
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    // 点击添加
    addEquipment() {
      this.pageNo = 1
      this.getProjectList(this.pageNo, this.pageSizeNumber, this.projectId)
      this.addFormVisible = true
      this.addFormData.remark = ''
      this.addFrojectId = ''
      this.addFormData.type = ''
      this.addFormData.keyNum = ''
      this.addFormData.projectId = ''
      this.addFormData.operator = ''
      this.addFormData.targetName = ''
      this.searchVal = ''
      this.$nextTick(function () {
        this.$refs['addFormData'].resetFields()
      })
    },
    //绑定
    binding(row) {
      this.addOrEdit = 1
      this.formVisible = true
      this.getType()
      this.isDisabled = true
      this.usccDisabled = true
      this.formData.projectId = ''
      this.formData.remark = ''
      this.formData.type = ''
      this.formData.machineNo = ''
      this.formData.uscc = ''
      this.formData.direction = ''
      this.formData.projectName = ''
      this.formData.companyName = ''
      this.formData.pointId = ''
      this.searchVal = ''
      this.getProjectList(this.pageNo, this.pageSizeNumber, '')
      // this.getUpdateData(row.id);
      // this.getPoints(row.projectId);
      this.formData.authCode = row.key
      this.$nextTick(function () {
        this.$refs['formData'].resetFields()
      })
    },
    handleCloseForm() {
      this.formVisible = false
      this.$refs['formData'].resetFields()
    },
    handleCloseAddForm() {
      this.formVisible = false
      this.$refs['addFormData'].resetFields()
    },
    toSave() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          this.isRuleLoading = true
          this.toBinding()
        } else {
          return false
        }
      })
    },
    toBinding() {
      var url, data, message
      // if (this.addOrEdit == "0") {
      url = 'api-att/cs/mac/expand/add'
      data = {
        projectId: this.projectList[this.formData.projectId].projectId,
        remark: this.formData.remark,
        type: this.formData.type,
        machineNo: this.formData.machineNo,
        uscc: this.formData.uscc,
        direction: this.formData.direction,
        pointId: this.formData.pointId,
        authCode: this.formData.authCode,
      }
      message = '添加成功'
      // } else {
      //   url = "api-att/cs/mac/expand/update";
      //   data = {
      //     id: this.id,
      //     remark: this.formData.remark,
      //     type: this.formData.type,
      //     machineNo: this.formData.machineNo,
      //     direction: this.formData.direction,
      //     projectId: this.projectNameId,
      //     uscc: this.companyNameUscc,
      //     pointId: this.formData.pointId,
      //     authCode: this.formData.authCode
      //   };
      //   message = "修改成功";
      // }
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then((res) => {
          this.isRuleLoading = false
          if (!res.data.hasError) {
            this.$message({
              message: message,
              type: 'success',
            })
            this.$refs.pagination.getTableListData()
            this.formVisible = false
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch(() => {
          this.isRuleLoading = false
          this.$message.error('添加数据失败')
        })
    },
    handleChange(val) {
      if (!this.formData.projectId && this.formData.projectId !== 0) {
        if (val) {
          this.pageNo = 1
          this.projectId = ''
          this.formData.projectId = ''
          this.getProjectList(this.pageNo, this.pageSizeNumber, this.projectId)
        }
        this.formData.uscc = ''
        this.installUnitList = []
      } else {
        if (typeof this.formData.projectId === 'string') {
          this.formData.projectId = ''
        } else {
          var projectData = this.projectList[this.formData.projectId]
          var projectId = projectData.projectId
          this.formData.uscc = ''
          this.formData.pointId = ''
          this.getCompanyList(projectId)
          this.getPoints(projectId)
        }
      }
    },
    //安装单位
    getCompanyList(projectId) {
      this.axios({
        method: 'post',
        // url: "api-p/projectcompany/expand/findbyprojectid",
        url: 'api-p/projectcompany/expand/findconstructor',
        data: {
          projectId: projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.installUnitList = res.data.result
              this.formData.companyName = res.data.result[0].name
              this.formData.uscc = res.data.result[0].code
            } else {
              this.$message.error('安装单位数据获取失败')
            }
          },
          (res) => {
            this.$message.error('安装单位数据获取失败')
          }
        )
        .catch((error) => {
          this.$message.error('安装单位数据获取失败')
        })
    },
    EquipmentData1() {
      var url, data, message
      if (this.addOrEdit == '0') {
        url = 'api-att/cs/mac/expand/add'
        data = {
          projectId: this.projectList[this.formData.projectId].projectId,
          remark: this.formData.remark,
          type: this.formData.type,
          machineNo: this.formData.machineNo.replace(/\s+/g, ''),
          uscc: this.formData.uscc,
          direction: this.formData.direction,
          pointId: this.formData.pointId,
          authCode: this.formData.authCode.replace(/\s+/g, ''),
        }
        message = '添加成功'
      } else {
        url = 'api-att/cs/mac/expand/update'
        data = {
          id: this.id,
          remark: this.formData.remark,
          type: this.formData.type,
          machineNo: this.formData.machineNo,
          direction: this.formData.direction,
          projectId: this.projectNameId,
          uscc: this.companyNameUscc,
          pointId: this.formData.pointId,
          authCode: this.formData.authCode,
        }
        message = '修改成功'
      }
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then((res) => {
          this.isRuleLoading = false
          if (!res.data.hasError) {
            this.$message({
              message: message,
              type: 'success',
            })
            this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            this.formVisible = false
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch(() => {
          this.isRuleLoading = false
          this.$message.error('添加数据失败')
        })
    },
    // 获取修改详情
    getUpdateData(id) {
      this.id = id
      this.axios({
        method: 'post',
        url: 'api-att/cs/mac/expand/detail',
        data: { id: id },
      }).then((res) => {
        if (!res.data.hasError) {
          var allData = res.data.result
          // this.formData.type = allData.type;
          // this.formData.machineNo = allData.machineNo;
          // this.formData.direction = allData.direction;
          // this.formData.remark = allData.remark;
          // this.formData.projectName = allData.projectName;
          // this.formData.companyName = allData.companyName;
          // this.formData.uscc = allData.uscc;
          // this.projectNameId = allData.projectId;
          // this.companyNameUscc = allData.uscc;
          // this.formData.pointId = allData.pointId;
          // this.formData.authCode = allData.authCode;
          // if ("zk" === allData.type) {
          //   this.formData.pointId = allData.pointId;
          //   this.pointShow = true;
          //   this.authCodeShow = false;
          // } else if ("yf" === allData.type) {
          //   this.pointShow = true;
          //   this.authCodeShow = true;
          // } else {
          //   this.pointShow = false;
          //   this.authCodeShow = false;
          // }
          this.$nextTick(() => {
            this.$refs.formData.clearValidate()
          })
        } else {
          this.$message.error('获取详情失败')
        }
      })
      // .catch(() => {
      //   this.$message.error("获取数据失败");
      // });
    },
    typeSelectChange(val) {
      if (val === 'zk') {
        this.pointShow = true
        this.authCodeShow = false
      } else if (val === 'yf') {
        this.pointShow = true
        this.authCodeShow = true
      } else {
        this.pointShow = false
        this.authCodeShow = false
      }
    },
    getPoints(projectId) {
      this.axios({
        method: 'post',
        url: 'api-att/cs/point/expand/list',
        data: { projectId: projectId },
      }).then((res) => {
        if (!res.data.hasError) {
          this.points = res.data.result.results
        }
      })
      // .catch(() => {
      //   this.$message.error("获取数据失败");
      // });
    },
    // 复制
    copy(companyName) {
      let url = companyName
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      // console.log(oInput.value)
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success',
      })
      oInput.remove()
    },
    toSaveAuthCode() {
      // 无用代码，处理无法通过验证的问题，需优化
      if (this.machineType === 'thrid') {
        this.addFormData.keyNum = 1
      } else if (this.machineType === 'yjhz') {
        this.addFormData.projectId = '1'
      }
      this.$refs['addFormData'].validate((valid) => {
        if (valid) {
          this.isRuleLoading = true
          this.EquipmentData()
        } else {
          return false
        }
      })
    },
    EquipmentData() {
      let data
      if (this.machineType === 'thrid') {
        data = {
          projectId: this.projectList[this.addFormData.projectId].projectId,
          keyNum: 1,
          type: this.addFormData.type,
          remark: this.addFormData.remark,
          operator: this.addFormData.operator,
          targetName: this.addFormData.targetName,
        }
      } else if (this.machineType === 'yjhz') {
        data = {
          // projectId: this.projectList[this.formData.projectId].projectId,
          keyNum: this.addFormData.keyNum,
          type: this.addFormData.type,
          remark: this.addFormData.remark,
          operator: this.addFormData.operator,
          targetName: this.addFormData.targetName,
        }
      }
      this.axios({
        method: 'post',
        url: 'api-att/cs/attkey/expand/insertKey',
        data: data,
      })
        .then((res) => {
          this.isRuleLoading = false
          if (!res.data.hasError) {
            this.$message({
              message: '生成成功',
              type: 'success',
            })
            this.$refs.pagination.getTableListData()
            this.addFormVisible = false
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch(() => {
          this.isRuleLoading = false
          this.$message.error('生成失败')
        })
    },
    machineTypeChange(val) {
      this.machineType = val
      this.addFormData.keyNum = ''
      this.addFormData.projectId = ''
      this.addFormData.remark = ''
      this.addFormData.operator = ''
      this.addFormData.targetName = ''
      this.projectId = ''
      // this.$refs.formData.validateField("jsUscc");
    },
    handleClose() {
      this.addFormVisible = false
    },
    handleCurrentChange(val) {
      this.getProjectList(
        val,
        this.pageSizeNumber,
        this.searchVal,
        this.projectId
      )
    },
    exportExcel() {
      window.location.href =
        common.commonApi +
        'api-att/cs/mac/expand/exportAttendanceMachine?projectName=' +
        this.filterField.projectName +
        '&type=' +
        this.filterField.type +
        '&key=' +
        this.filterField.key +
        '&startTime=' +
        this.filterField.startTime +
        '&endTime=' +
        this.filterField.endTime +
        '&status=' +
        this.filterField.status +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    /**
     * @description: 格式化时间
     */
    timeForma(row, column) {
      const daterc = row.createTime
      if (daterc || daterc == '0') {
        return common.GMTFormat(daterc)
      } else {
        return '--'
      }
    },
    upTimeForma(row, column) {
      const daterc = row.updateTime
      if (daterc || daterc == '0') {
        return common.GMTFormat(daterc)
      } else {
        return '--'
      }
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startTime = val
      } else {
        this.filterField.startTime = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endTime = val
      } else {
        this.filterField.endTime = ''
      }
    },
    remoteMethod(query) {
      if (query) {
        this.searchVal = query
        this.getProjectList(1, this.pageSizeNumber, query)
      }
    },
    updateOperator(row) {
      this.operatorFormData.id = row.id
      this.operatorFormData.operator = row.operator
      this.operatorFormData.targetName = row.targetName
      this.operatorFormData.remark = row.remark
      this.operatorFormVisible = true
    },
    operatorHandleClose() {
      this.operatorFormVisible = false
      this.$refs['operatorFormData'].resetFields()
    },
    saveOperator() {
      this.$refs['operatorFormData'].validate((valid) => {
        if (valid) {
          this.isOperatorLoading = true
          this.axios({
            method: 'post',
            url: 'api-att/cs/attkey/expand/editKey',
            data: this.operatorFormData,
          })
            .then((res) => {
              this.isOperatorLoading = false
              if (!res.data.hasError) {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                })
                this.$refs.pagination.getTableListData()
                this.operatorFormVisible = false
              } else {
                this.$message({
                  message: res.data.errorMsg,
                  type: 'error',
                })
              }
            })
            .catch(() => {
              this.isOperatorLoading = false
              this.$message.error('修改失败')
            })
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.container {
  .selectWidth {
    width: 100%;
  }
  // .titleBox {
  //   border: none;
  //   background: #e4ebf1;
  //   padding: 14px 24px;
  //   margin-bottom: 0px;
  //   .listAddBtn {
  //     width: 136px;
  //     background: #009588;
  //     border: none;
  //   }
  //   .listAddBtn:hover {
  //     background: #009588;
  //     border-color: #009588;
  //     opacity: 0.8;
  //   }
  //   .blockTitle {
  //     font-weight: bold;
  //     font-size: 18px;
  //     color: #333;
  //     line-height: 40px;
  //   }
  // }
  .listAddBtn {
    width: 136px;
    background: #009588;
    border: none;
    position: absolute;
    right: 24px;
    top: 7px;
    height: 36px;
  }
  .listAddBtn:hover {
    background: #009588;
    border-color: #009588;
    opacity: 0.8;
  }
}
.dialogTitle p {
  color: #333;
  font-size: 18px;
  line-height: 24px;
  span {
    font-size: 14px;
    color: #999;
    line-height: 24px;
  }
}
</style>
